{% extends "base/base.html" %}
{% block css %} 
	<link rel="stylesheet" href="/static/css/idangerous.swiper.css">
	<link rel="stylesheet" href="/static/css/index.css">
{% endblock %}
{% block content %}
    <section class="banner" >
    <div class="swiper-container" id="swiperContainer">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" style="background-image:url(/static/img/slide-1.jpg)"></li>
          <li class="swiper-slide" style="background-image:url(/static/img/slide-2.jpg)"></li>
          <li class="swiper-slide" style="background-image:url(/static/img/2.jpg)"></li>
        </ul>
      </div>
      <a class="arrow-left" id="arrowLeft" href="#"></a> 
      <a class="arrow-right" id="arrowRight" href="#"></a>
      <div id="pagination"></div>
    </section>
    <ul class="video-list" style="margin-top:20px;">
        <li class="video-item" style="height:100px">
            <img src="/static/img/2.jpg" alt="">
        </li><li class="video-item" style="height:100px">
            <img src="/static/img/2.jpg" alt="">
        </li><li class="video-item" style="height:100px">
            <img src="/static/img/2.jpg" alt="">
        </li><li class="video-item" style="height:100px">
            <img src="/static/img/2.jpg" alt="">
        </li>
    </ul>
	{% for type in vtypes %}
    <section class="videos" id="{{type}}">
        <h3 class="type-title">{{type}}列表</h3>
        <ul class="video-list">
			{% for v in videolist if v.vtype == type %}
            <li class="video-item">
				<a href="/video/{{v._id}}" class="video-cover" target="_blank">
					<img src="/getimg/{{v.vimgid}}" alt="">
				</a>
				<div class="video-desc">
					<h4 class="video-title"><a href="/video/{{v._id}}" target="_blank">{{v.vname}}</a></h4>
					<p class="video-p"><a href="/video/{{v._id}}" target="_blank">{{v.vdesc}}</a></p>
				</div>
				<div class="v-bottom">
					<p class="time"><span>{{v.username}}</span></p>
					<p class="time"><span>{{v.uploadtime | strftime}}</span></p>
				</div>
            </li>			
			{% endfor %}            
        </ul>
    </section>
	{% endfor%}
{% endblock %}
{% block script %}
<script src="/static/js/idangerous.swiper.min.js"></script>  
<script src="/static/js/index.js"></script>  
{% endblock %}